<template>
  <div
    v-if="loading"
    class="cell-render"
  >
    ...
  </div>
  <div
    v-else
    class="cell-render"
  >
    <el-checkbox
      v-if="rendererType === 'checkbox'"
      :model-value="cellData?.value"
      size="large"
      @change="handleCheckboxChange"
    />
    <div
      v-if="rendererType === 'propertyComp' && selectedKey !== field"
      class="cell-property-display-container g-one-line"
    >
      <div
        v-for="(item, index) in content"
        :key="index"
        class="cell-property-display-item g-one-line"
      >
        <img
          v-if="item.icon"
          :src="item.icon"
          alt=""
          width="16"
        />
        <span class="g-one-line">{{ item.text }}</span>
      </div>
    </div>
    <component
      :is="propertyManager.getEditorByPropertyRow(cellData?.propertyRow)"
      v-if="rendererType === 'propertyComp' && cellData?.propertyRow && selectedKey === field"
      v-focus
      class="property-content"
      :row="cellData?.propertyRow"
      :selected="true"
      @click.stop
    />
  </div>
</template>
<script lang="ts" setup>
import { BusEvent } from "@/mdesign-lib/mdesign-app.umd.js";
import { propertyManager } from "@/modules/model/comps/station/sider/attribute/PropertyManager";
import { propertyUtil } from "@/mdesign-lib/mdesign-app.umd.js";
import { modelService } from "@/mdesign-lib/mdesign-app.umd.js";
import { ref, computed, onBeforeMount } from "vue";
const props = defineProps<{
  params: any;
}>();

const rendererType = ref(props.params.rendererType);
const field = ref(props.params.colDef.field);
const rowData = computed(() => {
  return props.params.data;
});
const selectedKey = computed(() => {
  return rowData.value.selectedKey;
});
const cellData = computed(() => {
  // console.log('cellData change', props.params.data?.[field.value]);
  return rowData.value?.[field.value];
});
const content = computed(() => {
  return (cellData.value?.content as any[]) || [];
});

const loading = computed(() => {
  return rowData.value.loaded === 0;
});

onBeforeMount(() => {
  // console.log('params', props.params);
});

const handleCheckboxChange = async val => {
  const propertyRow = cellData.value?.propertyRow;
  const relationId = props.params?.context?.relationId as string;
  const exchangeId = rowData.value.id as string;
  let result;
  if (val) {
    const dto = propertyUtil.getAppendPropertyDto(propertyRow, app.activeProject!.config.id);
    dto.value = [relationId];
    result = await modelService.appendPropertyValue(dto);
  } else {
    const dto = propertyUtil.getUpdatePropertyDtoByPropertyRow(propertyRow, app.activeProject!.config.id);
    dto.value = [];
    result = await modelService.updateModelProperty(dto);
  }

  if (result.code === 1000) {
    app.$bus.emit(BusEvent.REFRESH_POPERTY, exchangeId, propertyRow.key);
  }
};
</script>
<style lang="scss">
.cell-render {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 12px;
  .el-checkbox {
    height: unset;
  }
  .cell-property-display-container {
    display: flex;
    flex-direction: column;
    .cell-property-display-item {
      display: flex;
      align-items: center;
      line-height: 24px;
      img {
        margin-right: 4px;
      }
    }
  }
  .property-content {
    flex: 1;
    margin: 0 -8px;
    background-color: #fff;
    overflow: hidden;
    .v-property-node-label {
      line-height: 24px;
    }
    .el-input__wrapper {
      box-shadow: none;
    }
    .el-input__inner {
      border: none;
      box-sizing: border-box;
      height: 24px;
      line-height: 24px;
      background: none;
      box-shadow: none;
      text-align: left;
    }
    .el-textarea__inner:focus {
      background: none;
      box-shadow: none;
    }
    .el-textarea__inner {
      background: none;
      box-shadow: none;
      padding: 5px 8px;
    }
    .el-textarea__inner {
      border: none;
      overflow: auto;
      text-overflow: ellipsis;
    }
    .el-input-border {
      border: none;
    }
  }
}
</style>
